<template>
    <div class="trans-container">
        <el-form :inline="true" class="choose-content">
            <el-form-item label="请选择比较字段">
                <el-radio-group v-model="chooseField">
                    <el-radio :label="item.columnId" v-for="item in chooseColumn" :key="item.columnId">{{ item.columnName }}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <div class="table-content">
            <div class="table-header">
                <div class="cell"/>
                <div class="cell" v-for="(item, index) in headerList" :key="index">{{ item }}</div>
            </div>
            <div class="table-body">
                <div class="table-tr" v-for="item in chooseColumn" :key="item.columnId">
                    <div class="cell">
                        {{ item.columnName }}
                    </div>
                    <div class="cell" v-for="(temp, index2) in headerList.length" :key="index2">
                        {{ list[index2][item.columnId] }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'transTable',
    props: {
        fieldValid: Object,
        showRowColumn: Array,
        list: Array
    },
    data() {
        return {
            chooseField: ''
        }
    },
    computed: {
        chooseColumn() {
            const temp = []
            this.showRowColumn.forEach(item => {
                if (this.fieldValid[item.relcolumnId] === '1') {
                    temp.push(item)
                }
            })
            return temp
        },
        headerList() {
            const temp = []
            this.list.forEach(item => {
                temp.push(item[this.chooseField])
            })
            return temp
        }
    },
    methods: {
    }
}
</script>

